<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>

    <div></div>

    <script>

        var oDiv = document.querySelector('div') ;

        // move(oDiv , 'left' , 20 , 1000 , function() {
        //     // oDiv.remove()
        //     move(oDiv , 'left' , 100 , 0 , )
        // }) ;

        move(oDiv , 'width' , 20 , 1000 , function() {
            move(oDiv , 'height' , 20 , 1000)
        }) ;
        


        function move(ele, direction , speed, end , cb) {
            // 获取初始值 
            var start = parseInt(getCss(ele , direction));
            // 判断end和start 
            speed = end > start ? speed : -speed;

            var t = setInterval(function () {
                start += speed;
                ele.style[direction] = start + 'px';
                if (Math.abs(end - start) <= Math.abs(speed)) {
                    clearInterval(t);
                    ele.style[direction] = end + 'px';

                    // 运动结束以后，想做一件事情
                    // move(oDiv , 'left' , 20 , 0) ;
                    // alert(666) ;
                    // ele.remove()

                    // if(cb) {
                    //     cb() ;
                    // }

                    cb && cb() ;
                    
                }
            }, 20)
        }



        function getCss(ele , prop) {
            if(getComputedStyle) {
                return getComputedStyle(ele)[prop]
            }
            return ele.currentStyle[prop] 
        }

    </script>

</body>

</html>